<template>
  <div class="ui container">
    <table class="ui celled table" style="margin-top: 40px !important;">
      <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>创建时间</th>
        <th>管理员</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in users" :key="user.userId">
        <td>{{ user.userId }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
        <td>{{ formatDate(user.createdAt) }}</td>
        <td>{{ user.isAdmin ? '是' : '否' }}</td>
        <td>
          <button class="ui button mini pink">编辑</button>
          <button class="ui button mini teal">删除</button>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="simple-pagination">
      <button
          :class="['page-btn', { disabled: isFirstPage }]"
          @click="changePage(currentPage - 1)"
          :disabled="isFirstPage">
        上一页
      </button>

      <span class="page-info">
        第{{ currentPage }}页/共{{ totalPages }}页
      </span>

      <button
          :class="['page-btn', { disabled: isLastPage }]"
          @click="changePage(currentPage + 1)"
          :disabled="isLastPage">
        下一页
      </button>

      <div class="page-jump" v-if="totalPages > 1">
        <input
            type="number"
            v-model.number="jumpPage"
            :min="1"
            :max="totalPages"
            @keyup.enter="jumpToPage">
        <button @click="jumpToPage">跳转</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 1,
      isFirstPage: true,
      isLastPage: true,
      jumpPage: 1
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('/api/users', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      })
          .then(response => {
            const pageInfo = response.data;
            this.users = pageInfo.list;
            this.currentPage = pageInfo.pageNum;
            this.totalPages = pageInfo.pages;
            this.isFirstPage = pageInfo.isFirstPage;
            this.isLastPage = pageInfo.isLastPage;
            this.jumpPage = pageInfo.pageNum;
          })
          .catch(error => {
            console.error('获取用户列表失败:', error);
          });
    },
    changePage(pageNum) {
      if (pageNum < 1 || pageNum > this.totalPages) return;
      this.currentPage = pageNum;
      this.fetchUsers();
    },
    jumpToPage() {
      const pageNum = Math.max(1, Math.min(this.jumpPage, this.totalPages));
      this.changePage(pageNum);
    },
    formatDate(date) {
      return new Date(date).toLocaleString();
    }
  }
};
</script>

<style scoped>
/* 保持原来的样式不变 */
.simple-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  font-size: 14px;
}
.page-btn {
  padding: 5px 15px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}
.page-btn:hover {
  background: #eee;
}
.page-btn.disabled {
  color: #ccc;
  cursor: not-allowed;
  background: #f9f9f9;
}
.page-info {
  margin: 0 15px;
  color: #666;
}
.page-jump {
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.page-jump input {
  width: 40px;
  padding: 5px;
  margin: 0 5px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.page-jump button {
  padding: 5px 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
</style>